<script setup lang='ts'>
// 自定义 规则
interface MarKerDetailHTML {
  detail: {
    markerId: number,
    latitude: number,
    longitude: number
  }
}
interface Search {
  title: string,
  path: string,
  promise?: Promise<Search>,
  imageUrl: string
}
import { onMounted, ref, reactive, defineProps, getCurrentInstance } from 'vue';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { https } from '@/api/api'
import { showToast, navigateTo, currentLocation } from '@/public';
import { useMarkerStore, useMapStore } from '@/store/index'
import MarkerOperate from '../index/component/markerOperate.vue';
const markerStore = useMarkerStore();
const mapStore = useMapStore();
const _that = getCurrentInstance()?.appContext.config.globalProperties;
//const { } = defineProps<Props>();

/**
 * @property 变量
 */
// 经纬度
const lnglat: LngLat = reactive({
  longitude: 0,
  latitude: 0
})
// 分享的数据
const d = ref<string>('');
// 地图实例
const mapCxt = ref<any>(null);
// 标记点
const markers = ref<Array<MarkerItem>>([])
// 展示可操作项
const idMarkerItem = ref(false);
/**
 * @property  所有请求以api开头 如:apiDataInfo
 * / 


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
// 获取分享的数据
const getShareData = async () => {
  const res = await https({
    mode: 'marker',
    name: 'apiFromShare',
    data: {
      d: d.value
    }
  })

  if (res.code !== 0) return showToast(res.data.msg);
  const data = mapStore.formatMarker(res.data.info);
  markerStore.updataMarker(res.data.info)
  lnglat.latitude = data.latitude;
  lnglat.longitude = data.longitude;
  // 添加标记点
  mapCxt.value.addMarkers({
    markers: [{
      ...data,
      iconPath: '../../static/mar-kers.png',
      callout: {
        ...data.callout as Callout,
        display: 'BYCLICK'
      },
      clear: true
    }]
  }
  );
}
// 点击点标记
const clickMarker = async (e: MarKerDetailHTML) => {
  if (e?.detail?.markerId === 10086) return;
  // const markerId = e?.detail?.markerId;
  // const code = await markerStore.getMarkerInfo(markerId + '');
  // if (code !== 0) return;
  idMarkerItem.value = true
}
// 跳转第三方导航
const navThirdParty = () => {
  // markerStore.marker?.lng,markerStore.marker?.lat
  mapCxt.value.openMapApp({
    longitude: Number(markerStore.marker.lng),
    latitude: Number(markerStore.marker.lat),
    destination: markerStore.marker?.alias,
  })
}
const leftClick = () => {
  navigateTo('/pages/index/index', 0)
}
/**
 * @property 内置方法
 */
// 页面第一次加载
onLoad((options: any) => {
  // 是否是分享来的
  d.value = options.d
})
onMounted(async () => {
  mapCxt.value = uni.createMapContext('map', _that);
  const res = await currentLocation();
  if (res === false) return;
  lnglat.longitude = Number(res?.lng);
  lnglat.latitude = Number(res.lat);
  markers.value.push({
    latitude:  Number(res?.lng),
    longitude: Number(res.lat),
    id: 10086,
    iconPath: '../../static/user-amap.png',
    width: '30',
    height: '30',
    anchor: {
      x: 0.5,
      y: 0.5
    },
    zIndex: 1000,
  });
  // 创建 分享的marker 点
  getShareData();
})
// 分享
onShareAppMessage((): Search => {
  const promise: Promise<Search> = new Promise(async (resolve) => {
    const res = await https({
      mode: 'marker',
      name: 'apiCreateShare',
      data: {
        mid: markerStore.marker.mid + ''
      }
    })

    if (res.code !== 0) {
      resolve({
        title: '分享失败',
        path: '/pages/sharePage/index',
        imageUrl: ''
      })
    } else {
      resolve({
        title: markerStore.marker.alias as string,
        path: `/pages/sharePage/index?t=${res.data.t}&d=${res.data.d}`,
        imageUrl: ''
      })
    }
  })
  return {
    title: '分享失败',
    path: '/pages/sharePage/index',
    imageUrl: '',
    promise,
  }
})
</script>
<template>
  <up-navbar :title="markerStore.marker?.alias" @leftClick="leftClick" leftText="返回首页">
  </up-navbar>
  <div class="w-[100vw] h-[100vh]">
    <map name="map" class="w-[100vw] h-[100vh]" id="map" :longitude="lnglat.longitude" :latitude="lnglat.latitude"
      :markers="markers" @markertap="clickMarker">

    </map>
  </div>
  <!-- 对标记点的操作 -->
  <MarkerOperate :isShow="idMarkerItem" @nav="navThirdParty" @close="idMarkerItem = false" />
</template>
<style lang="scss" scoped></style>